<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>集装箱箱型</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
            <a-button type="primary" @click="openCreate">+  创建箱型</a-button>

            <a-table :columns="columns" :data-source="tableData" :loading="tloading" class="tableMargin" :pagination="pagination" rowKey="id">
              <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
              <template slot="operation" slot-scope="text, record">
                <a @click="freezeIt(record.id, record.status)">{{record.status === 1 ? '冻结': (record.status === 0 ? '恢复':'')}}</a>
              </template>
            </a-table>
        </a-col>
      </a-row>
    </div>

    <a-modal :visible="visible" title="创建箱型" @ok="handleOk" @cancel="handleCancel" :confirmLoading="confirmLoading">
      <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapperCol="{span:18}">
        <a-form-model-item label="箱型" prop="type">
          <a-input v-model="form.type" :max-length="10"/>
        </a-form-model-item>
        <a-form-model-item label="TEU" prop="teu">
          <a-select v-model="form.teu">
            <a-select-option key="">请选择</a-select-option>
            <a-select-option :key="1">1TEU</a-select-option>
            <a-select-option :key="2">2TEU</a-select-option>
            <a-select-option :key="3">3TEU</a-select-option>
            <a-select-option :key="4">4TEU</a-select-option>
            <a-select-option :key="5">5TEU</a-select-option>
            <a-select-option :key="6">6TEU</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {queryContainerTypeList, editContainerType, addContainerType} from '@/api/systemPersonnelManage'

const fomrMessage = `必填项不能为空`
export default {
  data () {
    return {
      tloading: false,
      columns: [{
        title: '序号',
        width: 60,
        scopedSlots: {customRender: 'rn'}
      }, {
        title: '箱型',
        dataIndex: 'type',
        ellipsis: true
      }, {
        title: 'TEU',
        dataIndex: 'teu',
        ellipsis: true
      }, {
        title: '状态',
        dataIndex: 'status',
        customRender: (text, row, index) => {
          if (text === 1) {
            return <a-badge status="success" text="正常"/>
          } else if (text === 0) {
            return <a-badge status="error" text="冻结"/>
          }
        }
      }, {
        title: '操作',
        width: 100,
        scopedSlots: {customRender: 'operation'}
      }],
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        type: '',
        teu: null
      },
      rules: {
        type: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        teu: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ]
      },
      confirmLoading: false
    }
  },
  methods: {
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.tloading = true
      queryContainerTypeList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.tloading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      })
    },
    freezeIt (id, isFrozen) {
      if (!this.$root._bc.frozen) {
        this.$message.error('您无此权限！')
        return
      }
      let text = '箱型冻结后，将无法被新的订单使用，已经下单的不受影响，确认冻结？'
      let successText = '冻结成功！'
      if (isFrozen === 0) {
        text = '确定恢复正常吗？'
        successText = '恢复成功！'
      }

      let _this = this
      this.$confirm({
        title: text,
        okType: 'danger',
        onOk () {
          editContainerType({id, status: 1 - isFrozen}).then(rsp => {
            _this.$message.success(successText)
            _this.handleSubmit()
          })
        }
      })
    },
    openCreate () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      if (this.$refs.form) this.$refs.form.resetFields()
      this.visible = true
      this.form = {
        type: '',
        teu: null
      }
    },
    handleOk () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          addContainerType(this.form).then(rsp => {
            this.$message.success('创建成功')
            this.handleSubmit1()
            this.visible = false
            setTimeout(() => { this.confirmLoading = false }, 1000)
          }).catch(() => { this.confirmLoading = false })
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.$refs.form.resetFields()
    }
  },
  created () {
    this.handleSubmit()
  }
}
</script>

<style lang="less" scoped>
</style>
